.wrapper {
  display: flex;
  gap: var(--cui-spacings-byte);
  align-items: center;
}

.base {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: var(--cui-bg-highlight);
  border-radius: var(--cui-border-radius-pill);
}

.base::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: 1px;
  height: 100%;
  content: "";
  background-color: var(--cui-bg-accent-strong);
  transition: width 0.05s ease-out;
}

/* Task */

.base[aria-valuenow]::after {
  /* TODO: Replace with `attr()` once it's supported cross-browser */
  width: var(--pagination-width);
}

/* Timed */

@keyframes one {
  0% {
    width: 0%;
  }

  100% {
    width: 100%;
  }
}

@keyframes loop {
  0% {
    width: 0%;
    transform: translateX(0%);
  }

  90% {
    width: 100%;
    transform: translateX(0%);
  }

  100% {
    width: 100%;
    transform: translateX(100%);
  }
}

.base:not([aria-valuenow])::after {
  border-radius: var(--cui-border-radius-pill);
  animation-name: one;
  animation-duration: var(--pagination-animation-duration);
  animation-fill-mode: forwards;
  animation-play-state: var(--pagination-animation-play-state);
}

.base:not([aria-valuenow])[data-loop="true"]::after {
  animation-name: loop;
  animation-iteration-count: infinite;
}

/* Sizes */

.s {
  height: var(--cui-spacings-bit);
}

.m {
  height: var(--cui-spacings-byte);
}

.l {
  height: var(--cui-spacings-mega);
}

.label {
  flex-shrink: 0;
  font-size: var(--cui-body-s-font-size);
  line-height: var(--cui-body-s-line-height);
}
